<template>
	<view class="list-item-wrap">
		<image class="image" :src="imgUrl"></image>
		<view class="text-wrap">
			<text class="name">{{name}}</text>
			<text class="sname">{{trackCount}}首{{ nickname ? 'by ' + nickname : '' }}</text>
		</view>
		<view class="btn-wrap">
			<text class="more-btn"></text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imgUrl: String,
			name: String,
			nickname: String,
			trackCount: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.list-item-wrap{
		padding: 10upx 0upx 10upx 30upx;
		height: 100upx;
		display: flex;
		align-items: center;
		.image{
			width: 100upx;
			height: 100%;
			margin-right: 20upx;
			border-radius: 10upx;
		}
		.text-wrap{
			width: calc(100% - 200upx);
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.name{
				font-size: 32upx;
				color: #333;
				padding-bottom: 10upx;
				width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.sname{
				font-size: 24upx;
				color: #777;
				width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
		.btn-wrap{
			width: 80upx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.more-btn{
				@include more-btn(#777);
			}
		}
	}
</style>
